<template>
  <div class="envCompliance">
    <div class="content">
      <el-row class="title">
        <el-col :span="8">
          <span class="title-name">实时环境达标率
            <!--<span class="unit">(%)</span>--></span>
        </el-col>
        <el-col :span="16">
          <div class="right">
          </div>
        </el-col>
      </el-row>
      <div class="flex1">
        <el-row type="flex"
                justify="space-between"
                style="width:100%">
          <div class="circle-box">
            <process chartId="OPT_LUX"
                     :percentage="OPT_LUX.healthRate"
                     :color="changeColor(OPT_LUX.healthRate)"
                     title="照度"></process>
            <div class="rate">
              <span
                    :class="OPT_LUX.level=='优秀'?'excellent':OPT_LUX.level=='较优'?'better':OPT_LUX.level=='良好'?'good':OPT_LUX.level=='中等'?'secondary':OPT_LUX.level=='较差'?'poor':'bad'">{{OPT_LUX.level?OPT_LUX.level:"NC"}}</span>
            </div>
          </div>
        </el-row>
        <!-- <el-row type="flex"
                justify="space-between"
                style="width:100%">
          <div class="circle-box">
            <process chartId="CS"
                     :percentage="CS.healthRate"
                     :color="changeColor(CS.healthRate)"
                     title="色谱"></process>
            <div class="rate">
              <span
                    :class="CS.level=='优秀'?'excellent':CS.level=='较优'?'better':CS.level=='良好'?'good':CS.level=='中等'?'secondary':CS.level=='较差'?'poor':'bad'">{{CS.level}}</span>
            </div>
          </div>
        </el-row> -->
        <el-row type="flex"
                justify="space-between"
                style="width:100%">
          <div class="circle-box">
            <process chartId="RA"
                     :percentage="RA.healthRate"
                     :color="changeColor(RA.healthRate)"
                     title="Ra"></process>
            <div class="rate">
              <span
                    :class="RA.level=='优秀'?'excellent':RA.level=='较优'?'better':RA.level=='良好'?'good':RA.level=='中等'?'secondary':RA.level=='较差'?'poor':'bad'">{{RA.level?RA.level:"NC"}}</span>
            </div>
          </div>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                style="width:100%">
          <div class="circle-box">
            <process chartId="EML"
                     :percentage="EML.healthRate"
                     :color="changeColor(EML.healthRate)"
                     title="EML"></process>
            <div class="rate">
              <span
                    :class="EML.level=='优秀'?'excellent':EML.level=='较优'?'better':EML.level=='良好'?'good':EML.level=='中等'?'secondary':EML.level=='较差'?'poor':'bad'">{{EML.level?EML.level:"NC"}}</span>
            </div>
          </div>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                style="width:100%">
          <div class="circle-box">
            <process chartId="EDI"
                     :percentage="EDI.healthRate"
                     :color="changeColor(EDI.healthRate)"
                     title="EDI"></process>
            <div class="rate">
              <span
                    :class="EDI.level=='优秀'?'excellent':EDI.level=='较优'?'better':EDI.level=='良好'?'good':EDI.level=='中等'?'secondary':EDI.level=='较差'?'poor':'bad'">{{EDI.level?EDI.level:"NC"}}</span>
            </div>
          </div>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                style="width:100%">
          <div class="circle-box">
            <process chartId="tem3"
                     :percentage="CS.healthRate"
                     :color="changeColor(CS.healthRate)"
                     title="CS"></process>
            <div class="rate">
              <span
                    :class="CS.level=='优秀'?'excellent':CS.level=='较优'?'better':CS.level=='良好'?'good':CS.level=='中等'?'secondary':CS.level=='较差'?'poor':'bad'">{{CS.level?CS.level:"NC"}}</span>
            </div>
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { getPlatformEvaluate } from "@/api/platformManage"
import Process from "./components/process"
export default {
  name: "envCompliance",
  components: { Process },
  props: {
    platformId: String
  },
  data() {
    return {
      chart: null,
      OPT_LUX: {},
      CS: {},
      RA: {},
      EML: {},
      EDI: {},
      width: 180
    };
  },
  watch: {
    platformId(val) {
      getPlatformEvaluate(val).then(res => {

        if (res.code == 200) {
          let arr = res.value;
          for (let i = 0; i < arr.length; i++) {
            const e = arr[i];
            if (e.type == 'OPT_LUX') {
              this.OPT_LUX = e;
              this.OPT_LUX.healthRate = (e.healthRate == 'NaN') ? 0 : parseInt((e.healthRate).toFixed(2) * 100);
              this.OPT_LUX.level = e.level < 0 ? 'N/A' : e.level;
            } else if (e.type == 'CS') {
              this.CS = e;
              this.CS.healthRate = (e.healthRate == 'NaN') ? 0 : parseInt((e.healthRate).toFixed(2) * 100);
              this.CS.level = e.level < 0 ? 'N/A' : e.level;
            } else if (e.type == 'RA') {
              this.RA = e;
              this.RA.healthRate = (e.healthRate == 'NaN') ? 0 : parseInt((e.healthRate).toFixed(2) * 100);
              this.RA.level = e.level < 0 ? 'N/A' : e.level;
            } else if (e.type == 'EML') {
              this.EML = e;
              this.EML.healthRate = (e.healthRate == 'NaN') ? 0 : parseInt((e.healthRate).toFixed(2) * 100);
              this.EML.level = e.level < 0 ? 'N/A' : e.level;
            } else if (e.type == 'EDI') {
              this.EDI = e;
              this.EDI.healthRate = (e.healthRate == 'NaN') ? 0 : parseInt((e.healthRate).toFixed(2) * 100);
              this.EDI.level = e.level < 0 ? 'N/A' : e.level;
            }

          }
        }
      })
    }
  },
  methods: {
    changeColor(val) {
      if (val <= 25) {
        return '#FE4516';
      } else if (val >= 26 && val <= 50) {
        return '#FEA917';
      } else if (val >= 51 && val <= 75) {
        return '#FCD32E';
      } else if (val >= 76 && val <= 100) {
        return '#3BC421';
      } else {
        return '#FE4516';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.envCompliance {
  background-color: #fff;
  height: 190px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  .content {
    height: 100%;
    display: flex;
    justify-content: start;
    flex-direction: column;
    .flex1 {
      width: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      vertical-align: middle;
    }
  }
  .title {
    align-items: center;
    .title-name {
      font-size: 16px;
      font-weight: bold;
      line-height: 27px;
      color: #0a0a0a;
      .unit {
        // font-size: 12px;
        font-weight: 400;
        line-height: 27px;
        color: #707070;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .env-type {
      font-size: 12px;
      font-weight: 400;
      //   line-height: 16px;
      color: #262626;
      display: flex;
      align-items: center;
      margin-left: 10px;
      .clear-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #2d9dff;
      }
      .half-clear-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #ffad32;
      }
      .pollution-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #b6c2d2;
      }
    }
  }
}
.circle-box {
  margin: auto;
  position: relative;
  text-align: center;
  .rate {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #707070;
    text-align: center;
  }

  .excellent {
    color: green;
    font-size: 18px;
  }
  .better {
    color: #00cc33;
    font-size: 18px;
  }
  .good {
    color: blue;
    font-size: 18px;
  }
  .secondary {
    color: #0099ff;
    font-size: 18px;
  }
  .poor {
    color: #ff6600;
    font-size: 18px;
  }
  .bad {
    color: red;
    font-size: 18px;
  }
  .circle-center {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    .num {
      font-size: 36px;
      font-weight: 400;
      line-height: 43px;
      color: #0a0a0a;
    }
    .name {
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      color: #707070;
    }
  }
}
@media screen and (max-width: 1670px) {
  .envCompliance {
    .title {
      align-items: center;
      .title-name {
        font-family: Segoe UI;
        font-size: 16px;
        font-weight: bold;
        line-height: 27px;
        color: #0a0a0a;
        .unit {
          // font-size: 12px;
          font-weight: 400;
          line-height: 27px;
          color: #707070;
        }
      }
      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .env-type {
        font-size: 12px;
        font-weight: 400;
        //   line-height: 16px;
        color: #262626;
        display: flex;
        align-items: center;
        margin-left: 10px;
        .clear-div {
          margin-left: 3px;
          width: 19px;
          height: 6px;
          background: #2d9dff;
        }
        .half-clear-div {
          margin-left: 3px;
          width: 19px;
          height: 6px;
          background: #ffad32;
        }
        .pollution-div {
          margin-left: 3px;
          width: 19px;
          height: 6px;
          background: #b6c2d2;
        }
      }
    }
  }
  .circle-box {
    margin: auto;
    position: relative;
    text-align: center;
    .rate {
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      color: #707070;
      text-align: center;
    }

    .excellent {
      color: green;
      font-size: 18px;
    }
    .better {
      color: #00cc33;
      font-size: 18px;
    }
    .good {
      color: blue;
      font-size: 18px;
    }
    .secondary {
      color: #0099ff;
      font-size: 18px;
    }
    .poor {
      color: #ff6600;
      font-size: 18px;
    }
    .bad {
      color: red;
      font-size: 18px;
    }
    .circle-center {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -40px;
      margin-top: -40px;
      .num {
        font-size: 36px;
        font-weight: 400;
        line-height: 43px;
        color: #0a0a0a;
      }
      .name {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #707070;
      }
    }
  }
}
@media screen and (max-width: 1440px) {
  // .circle-box {
  //   margin: auto;
  //   position: relative;
  //   text-align: center;
  //   .rate {
  //     font-size: 12px;
  //     font-weight: 400;
  //     line-height: 16px;
  //     color: #707070;
  //     text-align: center;
  //   }

  //   .excellent {
  //     color: green;
  //     font-size: 18px;
  //   }
  //   .better {
  //     color: #00cc33;
  //     font-size: 18px;
  //   }
  //   .good {
  //     color: blue;
  //     font-size: 18px;
  //   }
  //   .secondary {
  //     color: #0099ff;
  //     font-size: 18px;
  //   }
  //   .poor {
  //     color: #ff6600;
  //     font-size: 18px;
  //   }
  //   .bad {
  //     color: red;
  //     font-size: 18px;
  //   }
  //   .circle-center {
  //     width: 80px;
  //     height: 80px;
  //     position: absolute;
  //     top: 50%;
  //     left: 50%;
  //     margin-left: -40px;
  //     margin-top: -40px;
  //     .num {
  //       font-size: 36px;
  //       font-weight: 400;
  //       line-height: 43px;
  //       color: #0a0a0a;
  //     }
  //     .name {
  //       font-size: 12px;
  //       font-weight: 400;
  //       line-height: 16px;
  //       color: #707070;
  //     }
  //   }
  // }
}
</style>
